import React,{ Component } from 'react';
import { connect } from 'react-redux'
import ImageLazy from './commons/ImageLazy';
import NavLink from './commons/NavLink';

const index_banner_swiper1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper1.jpg');
const index_banner_swiper2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper2.jpg');
const index_banner_swiper3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper3.jpg');
const index_banner_swiper4 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_banner_swiper4.jpg');
const index_today = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_today.png');
const index_transform = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_transform.png');
const index_community = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_community.png');
const index_money = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_money.png');
const index_order = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_order.png');
const index_img1 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img1.jpg');
const index_img2 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img2.jpg');
const index_img3 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img3.jpg');
const index_img4 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img4.jpg');
const index_img5 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img5.jpg');
const index_img6 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img6.jpg');
const index_img7 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img7.jpg');
const index_img8 = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../static/img/index_img8.jpg');

import {index_data} from '../actions';

import Swiper from 'swiper';

let head_swiper,index_con_swiper;
let mydefault = React.createClass({
  componentDidMount:function(){
    this.setPriWidth();
    //首页banner轮播
    head_swiper= new Swiper('.head_swiper',{
       pagination: '.pagination',
       paginationClickable: true,
       autoplay:3000,
       speed:800,
       calculateHeight:true,
       onTouchStart:function(){
         head_swiper.stopAutoplay();
       },
       onTouchEnd:function(){
         head_swiper.startAutoplay();
       }
     });
     //首页中间
     index_con_swiper = new Swiper('.index_con_swiper',{
       paginationClickable: true,
       slidesPerView: 'auto',
       calculateHeight:true,
     });
     const {dispatch} = this.props;
    //  dispatch(index_data());
  },
  setPriWidth:function(){
    $('.index_con_swiper .swiper-slide').each(function(){
      let txt_rig = $(this).find('.right'),
          txt= $(this).find('.txt'),
          txt_w = parseFloat(txt.offset().width),
          txt_l = parseFloat(txt.find('.left').css('margin-left')),
          padd_left = parseFloat(txt.css('padding-left')),
          padd_right = parseFloat(txt.css('padding-right')),
          def_w = txt_w - padd_left-padd_right -txt_rig.width() - txt_l - 8;
          $(this).find('.left').css('width',def_w)
    })
  },
  componentDidUpdate:function(){
     head_swiper.reInit();
     index_con_swiper.reInit();
     this.setPriWidth();
  },
  render:function(){
    const {banner_swiper,content_swiper} = this.props||[];
    const to_banner_swiper = banner_swiper||[];
    const to_content_swiper = content_swiper||[];
    return(
      <div id="index">
        <header>
            <div className="head_swiper swiper-container">
              <div className='swiper-wrapper'>
                {/* {
                  to_banner_swiper.map(function(item){
                    return(
                      <div key={item.id} className="swiper-slide">
                        <a href="javascript:void(0)">
                          <ImageLazy src={item.url} style={{height:'4.8rem'}} />
                        </a>
                      </div>
                    )
                  })
                } */}
                <div className="swiper-slide">
                  <NavLink to="/about">
                    <ImageLazy src={index_banner_swiper1} style={{height:'4.8rem'}} />
                  </NavLink>
                </div>
                <NavLink to="/hos/det/50" className="swiper-slide">
                  <a href="javascript:void(0)">
                    <ImageLazy src={index_banner_swiper3} style={{height:'4.8rem'}} />
                  </a>
                </NavLink>
                <NavLink to="/crowdFunding" className="swiper-slide">
                  <a href="javascript:void(0)">
                    <ImageLazy src={index_banner_swiper4} style={{height:'4.8rem'}} />
                  </a>
                </NavLink>
              </div>
              <div className="pagination"></div>
            </div>
          <nav className="border_b1">
            <div className="wrapper">
              <NavLink to="/mallView/them_weiz">
                <ImageLazy src={index_today} style={{width:'.48rem'}} /><br/>
                今日
              </NavLink>
              <NavLink to="/indexView/order">
                <ImageLazy src={index_order} style={{width:'.4rem'}} /><br/>
                定制
              </NavLink>
              <NavLink to="/indexView/transformView">
                <ImageLazy src={index_transform} style={{width:'.45rem'}} /><br/>
                蜕变
              </NavLink>
              <NavLink to="/crowdFunding">
                <ImageLazy src={index_money} style={{width:'.44rem'}} /><br/>
                财富
              </NavLink>
              <NavLink to="/indexView/community">
                <ImageLazy src={index_community} style={{width:'.47rem'}} /><br/>
                俪社
              </NavLink>
            </div>
          </nav>
        </header>
        <div className="container">
          <div className="item_wrapper">
            <div className="item">
              <h3 className="tit_sty1">今日<br/><small>美在当下，每一天都闪闪发光</small></h3>
              <div className="index_con_swiper swiper-container common_swiper">
                  <div className="swiper-wrapper">
                    <NavLink to="servItem/det/5" className="swiper-slide">
                      <em>热销</em>
                      <ImageLazy src="http://image.meirenguvip.com/hospital/49/item/5/1484730213138_750_480.jpg" style={{height:'3.6rem'}} />
                      <div className="txt">
                        <span className="left">
                          <var>爱芙莱玻尿酸（0.5ML/次）祛黑眼圈 宋丽秋</var>
                          <small>原装正品，品质保障</small>
                        </span>
                        <span className="right">
                          ¥ 2380.00
                        </span>
                      </div>
                    </NavLink>

                    <NavLink to="servItem/det/6" className="swiper-slide">
                      <em>热销</em>
                      <ImageLazy src="http://image.meirenguvip.com/hospital/49/item/6/148473039051_750_480.jpg" style={{height:'3.6rem'}} />
                      <div className="txt">
                        <span className="left">
                          <var>乔雅登玻尿酸（0.8ML/次）填充卧蚕 唐振利</var>
                          <small>十分钟重现青春容颜</small>
                        </span>
                        <span className="right">
                          ¥ 10240.00
                        </span>
                      </div>
                    </NavLink>

                    <NavLink to="servItem/det/12" className="swiper-slide">
                      <em>热销</em>
                      <ImageLazy src="http://image.meirenguvip.com/hospital/49/item/12/14850795851_750_480.jpg" style={{height:'3.6rem'}} />
                      <div className="txt">
                        <span className="left">
                          <var>保妥适肉毒素（30单位/次）</var>
                          <small>还你精致小V脸</small>
                        </span>
                        <span className="right">
                          ¥ 4800.00
                        </span>
                      </div>
                    </NavLink>
                  </div>
                </div>
              <div className="img_show">
                <NavLink to="/hos/det/49"><ImageLazy src={index_img1} style={{height:'4.8rem'}} /></NavLink>
                <div className="border_b1"></div>
                <NavLink to="/hos/det/50"><ImageLazy src={index_img2} style={{height:'4.8rem'}} /></NavLink>
              </div>
            </div>

            <div className="item">
              <h3 className="tit_sty1">定制<br/><small>你的美，独一无二</small></h3>
              <div className="img_show">
                <NavLink to="/servItem/det/11"><ImageLazy src={index_img3} style={{height:'4.6rem'}} /></NavLink>
                <div className="border_b1"></div>
                <NavLink to="/servItem/det/10"><ImageLazy src={index_img4} style={{height:'4.6rem'}} /></NavLink>
              </div>
            </div>

            <div className="item">
              <h3 className="tit_sty1">蜕变<br/><small>一场蜕变，两种人生</small></h3>
              <div className="img_show">
                <NavLink to="/art/detial/13"><ImageLazy src={index_img5} style={{height:'4.8rem'}} /></NavLink>
                <div className="border_b1"></div>
                <NavLink to="/art/detial/29"><ImageLazy src={index_img6} style={{height:'4.8rem'}} /></NavLink>
              </div>
            </div>

            <div className="item">
              <h3 className="tit_sty1">财富<br/><small>美与财富都靠打理</small></h3>
              <div className="img_show">
                <NavLink to="/crowdFunding"><ImageLazy src={index_img7} style={{height:'4.8rem'}} /></NavLink>
              </div>
            </div>

            <div className="item">
              <h3 className="tit_sty1">俪社<br/><small>终将会遇见</small></h3>
              <div className="img_show">
                <NavLink to="/indexView/community"><ImageLazy src={index_img8} style={{height:'4.8rem'}} /></NavLink>
              </div>
            </div>

          </div>
        </div>
      </div>
    )
  }
})


const mapStateToProps = (state) => {
  const {banner_swiper} = state.app.index_data||[];
  const {content_swiper} = state.app.index_data||[];
  return {
    banner_swiper,content_swiper
  }
}

export default connect(mapStateToProps)(mydefault)
